/*
 * @Author: lwHao
 * @Date: 2020-10-12 15:16:38
 * @LastEditors: lwHao
 * @LastEditTime: 2020-10-23 16:27:05
 */
// const Vue  = require('vue')
const express = require('express')
const fs = require('fs')
const setupDevServer = require('./build/setup-dev-server')
const { createBundleRenderer } = require('vue-server-renderer')
// 创建渲染器
// const renderer = require('vue-server-renderer').createRenderer({
//   template: fs.readFileSync('./index.template.html', 'utf-8')
// })
// 使用bundleRender
// const serverBundle = require('./dist/vue-ssr-server-bundle.json')
// const renderer = require('vue-server-renderer').createBundleRenderer(serverBundle, {
//   runInNewContext: false, // 推荐
//   template:fs.readFileSync('./index.template.html', 'utf-8'), // （可选）页面模板
//   clientManifest: require('./dist/vue-ssr-client-manifest.json') // （可选）客户端构建 manifest
// })


// 创建服务器实例
const server = express()

// 处理静态资源的中间件 处理的是磁盘中的文件
server.use('/dist', express.static('./dist'))

const isProd = process.env.NODE_ENV === 'production'
let renderer
let onReady
if(isProd){
  const serverBundle = require('./dist/vue-ssr-server-bundle.json')
  renderer = createBundleRenderer(serverBundle, {
    runInNewContext: false, // 推荐
    template:fs.readFileSync('./index.template.html', 'utf-8'), // （可选）页面模板
    clientManifest: require('./dist/vue-ssr-client-manifest.json') // （可选）客户端构建 manifest
  })
} else {
  // 开发模式 -> 监视打包构建 -> 重新生成 Renderer 渲染器
  onReady = setupDevServer(server, (serverBundle, template, clientManifest) => {
    renderer = createBundleRenderer(serverBundle, {
      runInNewContext: false, // 推荐
      template, // （可选）页面模板
      clientManifest // （可选）客户端构建 manifest
    })
  })

}

// 添加服务器路由，路由处理
// server.get('/', (req, res) => {
  
//   // renderer.renderToString(app, {
//   // 不传实例会自动找到 entry-server 得到里边的vue实例
//   renderer.renderToString({
//     title: '拉钩教育', // 绑定到模板中的内容
//     meta: `
//       <meta name="description" content="">
//     `
//   }, (err, html) => {
//     if (err){
//       return res.status(500).end('Internal Server Error.')
//     }
//     // 解决乱码 (1)
//     res.setHeader('Content-type', 'text/html; charset=utf8')
//     // res.end(html)
//     res.end(html)
//   })
// })

// const routerRender = (req, res) => {
//     // renderer.renderToString(app, {
//     // 不传实例会自动找到 entry-server 得到里边的vue实例
//     renderer.renderToString({
//       title: '拉钩教育', // 绑定到模板中的内容
//       meta: `
//         <meta name="description" content="">
//       `,
//       url: req.url
//     }, (err, html) => {
//       if (err){
//         return res.status(500).end('Internal Server Error.')
//       }
//       // 解决乱码 (1)
//       res.setHeader('Content-type', 'text/html; charset=utf8')
//       // res.end(html)
//       res.end(html)
//     })
//     try {
      
//     } catch (err) {
//       res.status(500).end('Internal Server Error.')
//     }
// }
// 改造
const routerRender = async (req, res) => {
    try {
      // 不传实例会自动找到 entry-server 得到里边的vue实例
    const html = await renderer.renderToString({
      title: '拉钩教育', // 绑定到模板中的内容
      meta: `
        <meta name="description" content="">
      `,
      url: req.url
    })
    // 解决乱码 (1)
    res.setHeader('Content-type', 'text/html; charset=utf8')
    res.end(html)
  } catch (err) {
    console.log(err);
    res.status(500).end('Internal Server Error.')
  }
}

// 服务端路由设置为*，意味着所有服务端路由都会进入
server.get('*', isProd 
  ? routerRender 
  : async (req, res) => {
    // 等待有了 Renderer 渲染器以后，调用 routerRender 进行渲染
    await onReady
    routerRender(req, res)
  })

// 启动web服务
server.listen(3000, () => {
  console.log('starting at port 3000'); 
})
// // 创建vue实例
// const app = new Vue({
//   template: `
//     <div id="app">
//       <h1>{{message}}</h1>
//     </div>
//   `,
//   data: {
//     message: 'lagoujiayu'
//   }
// })

// renderer.renderToString(app,(err,html)=>{
//   if(err) throw err
//   console.log(html);
// })